<template>
  <div>
    <div class="top">

      <span class="zuo">地区关键词</span>
      <el-input v-model="ditu" type="danger" placeholder="请输入地区关键字" class="inp" clearable style="width: 200px;" />
      <el-button class="btn" type="danger" @click="search">搜索</el-button>
    </div>

    <baidu-map class="map-container" :center="center" :zoom="zoom">
      <!-- 在这里添加其他地图覆盖物或控件 -->
    </baidu-map>
  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      ditu: '',
      // center: {}, // 替换为您的地图中心点的经纬度
      zoom: 80 // 替换为您的地图缩放级别
    }
  },
  computed: {
    center() {
      return {
        lng: this.list.longitude,
        lat: this.list.latitude
      }
    }
  },
  created() {
    this.$set(this.center, 'lng', 114.407355)
    this.$set(this.center, 'lat', 30.712864)
  },
  methods: {
    search() {
      // 使用Baidu地图的地理编码服务进行地区搜索

      // eslint-disable-next-line no-undef
      const geocoder = new BMap.Geocoder()
      geocoder.getPoint(this.ditu, point => {
        if (point) {
          // 更新地图的中心点和缩放级别
          this.center = {
            lng: point.lng,
            lat: point.lat
          }
          this.zoom = 14
        } else {
          // 地区搜索失败
          this.$message.error('未找到该地区')
        }
      }, '中国')
    }
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 845px;
}

.top {
  margin-bottom: 20px;
}

.zuo {

  margin-left: 20px;
  margin-right: 20px;
}
.btn{
  margin-left: 10px;

}

</style>
